<template>
	<view class="check-plan-container">
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message type="warn" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-drawer class="view-drawer" ref="showRight" mode="left" :mask-click="false">
			<view class="view-check" style="display: flex;">

				<uni-data-select v-model="searchForm.inspectionCategory" :localdata="inspectionCategoryOption"
					@change="changeCate" placeholder="请选择检查类别" :clear="false"></uni-data-select>

				<uni-data-select v-model="searchForm.inspectionClassify" :localdata="inspectionClassifyOption"
					@change="handleClassChange" placeholder="请选择检查分类" :clear="false"></uni-data-select>

				<uni-data-select v-model="searchForm.inspectionScope" :localdata="inspectionScopeOption"
					placeholder="请选择检查范围" :clear="false"></uni-data-select>

				<view style="flex: 1">
					<button class="mini-btn" type="primary" size="mini" @click="searchBtn">搜索</button>
				</view>


			</view>

			<scroll-view style="height: 100%;" scroll-y="true" scroll-x="true">
				<view class="slot-content">
					<uni-table ref="table" align="left" :loading="loading" border stripe type="selection"
						emptyText="暂无更多数据" @selection-change="selectionChange" width="100%">
						<uni-tr>
							<uni-th width="30" align="center">序号</uni-th>
							<uni-th width="100" align="center">检查类别</uni-th>
							<uni-th width="100" align="center">检查分类</uni-th>
							<uni-th width="100" align="center">检查范围</uni-th>
							<uni-th width="160" align="center">检查标准</uni-th>
							<uni-th width="140" align="center">检查依据</uni-th>

						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td>{{ index+ 1 }}</uni-td>
							<uni-td>
								<view class="exceed">
									<text>{{ item.inspectionCategoryName }}</text>
								</view>
							</uni-td>
							<uni-td align="center">
								<view class="exceed">
									<text>{{ item.inspectionClassifyName }}</text>
								</view>
							</uni-td>

							<uni-td align="center">
								<view class="exceed">
									<text>{{ item.inspectionScopeName }}</text>
								</view>
							</uni-td>
							<uni-td align="center">
								<view class="exceed">
									<text>
										{{ item.inspectionStandard }}
									</text>
								</view>
							</uni-td>
							<uni-td align="center">
								<view class="exceed">
									{{ item.inspectionBasis }}
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>

					<!-- </scroll-view> -->
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="queryForm.pageSize"
							:current="queryForm.pageNum" :total="total" @change="changeNum" /></view>
				</view>
				<view class="fotter">
					<button @click="closeDrawer" size="mini" type="primary" style="margin-right: 14rpx;">取消</button>
					<button @click="confirm" size="mini" type="primary">确认</button>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>

</template>

<script>
	import {
		searchStand
	} from "@/api/hiddenTrouble/periodShoot.js"
	import {
		leftTreeList
	} from "@/api/hiddenTrouble/checkStandard.js";

	export default {
		data() {
			return {
				show: false,
				//选中的数据的索引
				selectedIndexs: [],
				//提示信息
				messageText: "",
				//搜索内容
				queryForm: {},
				searchForm: {},
				//检查类别
				inspectionCategoryOption: [],
				//检查分类
				inspectionClassifyOption: [],
				//检查范围
				inspectionScopeOption: [],
				//选中数据
				selectDatas: [],
				tableData: [],
				queryForm: {
					// 每页数据量
					// pageSize: 10,
					// // 当前页
					// pageNum: 1,
					inspectionCategory: "",
					inspectionClassify: "",
					inspectionScope: "",
				},

				// 数据总量
				total: 0,
				loading: false,
			}
		},

		methods: {
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},

			//检查类别change
			async changeCate(val) {
				this.searchForm = {
					inspectionClassify: "",
					inspectionScope: ""
				}

				let arr = []
				let query = {
					parentId: val,
				};
				let res = await leftTreeList(query);
				arr = res.data.map(item => {
					return {
						text: item.inspectionCategory,
						value: item.id
					}
				});
				this.inspectionClassifyOption = arr
				console.log("分类", this.inspectionClassifyOption)
			},
			//分类切换
			async handleClassChange(val) {
				this.searchform = {
					inspectionScope: ""
				};
				let query = {
					parentId: val,
				};
				let res = await leftTreeList(query);
				this.inspectionScopeOption = res.data.map(item => {
					return {
						text: item.inspectionCategory,
						value: item.id
					}
				});

			},
			//获取检查类别
			async getTreeList() {
				let arr = []
				let query = {
					deptId: this.localRes.companyAccount,
					inspectionLevel: 1,
				};
				let res = await leftTreeList(query);
				// this.inspectionCategoryOption = res.data
				arr = res.data.map(item => {
					return {
						text: item.inspectionCategory,
						value: item.id
					}
				})
				this.inspectionCategoryOption = arr
			},
			// 确定按钮
			confirm() {
				if (this.selectDatas.length <= 0) {
					return uni.showToast({
						icon: "notification-filled",
						title: "请选择数据"
					})
				}
				this.$emit("manualCheck", this.selectDatas)
				this.$refs.showRight.close();
			},
			//取消按钮

			//改变分页的方法
			changeNum(val) {
				// console.log("获取分页", pageNum, pageSize)
				let {
					current
				} = val
				this.queryForm.pageNum = current
				this.getStandard()

			},
			//搜索按钮
			async searchBtn() {
				let categoryId = ""
				if (this.searchForm.inspectionCategory != "") {
					//类别
					categoryId = this.searchForm.inspectionCategory;
				}
				if (this.searchForm.inspectionClassify != "") {
					//分类
					categoryId = this.searchForm.inspectionClassify;
				}
				if (this.searchForm.inspectionScope != "") {
					//范围
					categoryId = this.searchForm.inspectionScope;
				}
				this.queryForm.deptId = this.localRes.companyAccount
				this.queryForm.categoryId = categoryId
				this.queryForm.pageNum = 1

				let res = await searchStand(this.queryForm)
				this.tableData = res.rows
				this.total = res.total
			},
			//获取检查标准
			async getStandard() {
				this.localRes = uni.getStorageSync("userInfo")

				// this.queryForm.categoryId = this.localRes.companyAccount
				this.queryForm.deptId = this.localRes.companyAccount
				//是否需要条件
				let res = await searchStand(this.queryForm)
				this.tableData = res.rows
				this.total = res.total
			},
			// 多选
			selectionChange(e) {
				let arrList = []
				this.selectedIndexs = e.detail.index
				// 将数组中的值，作为table表格数组的下标来获取对应的当前行数据
				this.selectedIndexs.map(i => {
					arrList.push(this.tableData[i])
				})
				this.selectDatas = arrList
			},

		},
		mounted() {
			this.getStandard()
			this.getTreeList()
		}
	}
</script>

<style lang="scss" scoped>
	.check-plan-container {
		::v-deep {

			.view-check {
				display: flex;
				flex-wrap: wrap;
				margin: 8px;
			}

			.uni-stat__select {
				margin: 2px 4px;

				.uni-stat-box {
					.uni-select {
						width: 160px;

						.uni-select__selector {
							top: 33px;
						}
					}
				}
			}

			.uni-drawer__content--visible {
				width: 100% !important;
			}

			.uni-table {
				min-width: 100% !important;
			}

			.exceed {
				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-line-clamp: 4;
				// -webkit-box-orient: vertical;

				height: 70px;
				/* 或其他固定高度 */
				overflow-y: auto;
				/* 允许垂直滚动 */
			}

			.fotter {
				height: 128px;
				text-align: right;
				margin: 10px;

				.uni-button {
					margin: 6px;
				}
			}
		}

	}
</style>